<template>
  <div class="page">
    <avue-crud
      :data="data"
      :option="option"
      @refresh-change="refreshChange"
      @row-save="rowSave"
      @row-update="rowUpdate"
      @row-del="rowDel"
      @search-change="searchChange"
    ></avue-crud>
  </div>
</template>

<script>
import config from '@/config.js'

export default {
  data() {
    return {
      data: [],
      option: {
        column: [
          {
            label: `食物名称`,
            prop: `name`,
            search: true,
          },
          {
            label: `图片`,
            prop: `images`,
            type: `upload`,
            listType: `picture-img`,
            propsHttp: {
              res: `data`,
            },
            action: `${config.baseApi}/file/upload`,
          },
          {
            label: `价格`,
            prop: `price`,
            type: `number`,
          },
          {
            label: `使用规格`,
            prop: `use_property`,
            type: `radio`,
            dicData: [
              {
                label: `否`,
                value: 0,
              },
              {
                label: `是`,
                value: 1,
              },
            ],
          },
          {
            label: `店铺名称`,
            prop: `goodClassId`,
            type: `select`,
            props: {
              label: `name`,
              value: `id`,
            },
            dicUrl: `${config.baseApi}/goodClass`,
          },
          {
            label: `规格`,
            prop: `property`,
            type: `checkbox`,
            props: {
              label: `name`,
              value: `id`,
            },
            dicUrl: `${config.baseApi}/property`,
          },
          {
            label: `介绍`,
            prop: `content`,
            type: `textarea`,
            hide: true,
          },
        ],
      },
    }
  },
  async created() {
    this.refreshChange()
  },
  methods: {
    async refreshChange() {
      this.data = await this.$http.instance.get(`/goods_list`)
    },
    async rowSave(form, done, loading) {
      await this.$http.instance.post(`/goods_list`, form)
      done(form)
    },
    async rowDel(form, index, done) {
      await this.$http.instance.delete(`/goods_list/${form.id}`)
      done(form)
    },
    async searchChange(params, done) {
      this.data = await this.$http.instance.get(`/goods_list?q=${params.name}`)
      setTimeout(() => {
        done()
      }, 500)
    },
    async rowUpdate(form, index, done, loading) {
      await this.$http.instance.patch(`/goods_list/${form.id}`, form)
      done(form)
    },
  },
}
</script>
